<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <style>
        .img_box {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;
        }
        .prev_img {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 3.8rem;
          height: 3.8rem;
          background: #ccc;
          overflow: hidden;
        }
        .prev_img img {
          display: block;
          width: 100%;
          height: auto;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav" onclick="handleback()" tapmode>
        <div class="aui-pull-left aui-btn">
            <span class="aui-iconfont aui-icon-left"></span>
        </div>
        <div class="aui-title">详情</div>
    </header>
    <ul class="aui-list aui-form-list">
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                  所属项目：
                </div>
                <div class="aui-list-item-input">
                    <input type="text" class="proj" placeholder="Name">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    检修楼号：
                </div>
                <div class="aui-list-item-input">
                    <input type="text" class="build" placeholder="Name">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    检修楼层：
                </div>
                <div class="aui-list-item-input">
                    <input type="text" class="floor" placeholder="Name">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    检修部位：
                </div>
                <div class="aui-list-item-input">
                    <input type="text" class="position" placeholder="Name">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    处理人(施工方)：
                </div>
                <div class="aui-list-item-input aui-padded-10">
                    <input type="text" class="do_people" placeholder="Name">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    抄送人：
                </div>
                <div class="aui-list-item-input">
                    <input type="text" class="modify_group" placeholder="Name">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    整改日期：
                </div>
                <div class="aui-list-item-input">
                    <input type="text" class="require_time" placeholder="Name">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    质检说明：
                </div>
                <div class="aui-list-item-input">
                    <input type="text" class="description" placeholder="Name">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    整改前图：
                </div>
                <div class="aui-list-item-input">
                  <div class="img_box aui-margin-t-10 aui-margin-b-10" id="imagelist">
                    <!-- <span class="prev_img aui-margin-r-5 aui-margin-b-5">
                      <img src="../../../image/demo01.jpeg" alt="图片" />
                    </span> -->
                  </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    整改后图：
                </div>
                <div class="aui-list-item-input">
                  <div class="img_box aui-margin-t-10 aui-margin-b-10" id="afterImgList">
                    <!-- <span class="prev_img aui-margin-r-5 aui-margin-b-5">
                      <img src="../../../image/demo01.jpeg" alt="图片" />
                    </span> -->
                  </div>
                </div>
            </div>
        </li>
    </ul>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/doT.min.js"></script>
<script type="text/template" id="imagetemp">
  {{~it:value:index}}
    <span class="prev_img aui-margin-r-5 aui-margin-b-5">
      <img src="../../../image/demo01.jpeg" alt="图片" />
    </span>
  {{~}}
</script>
<script type="text/javascript">
    var token = $api.getStorage("token");
    var uid = $api.getStorage('uid');
    var shigongdata = [], groupdata = [],chaosongdata = [];
    apiready = function() {
        initmember();
        initmember2();
        initgroupList();
        init(api.pageParam.id);
    };
    // 初始化相关数据
    var initmember = function () {
        api.ajax({
            url: $api.SERVE_URL + 'index.php/index/index/memberList',
            method: 'post',
            headers: {
                "token": token
            },
            data: {
                values: {
                    'group': false,
                    'types': 4,
                    'token_uid': uid
                }
            }
        }, function(ret, err) {
            if (ret) {
                var code = ret.code;
                if (code === 200) {
                    shigongdata = ret.data.list;
                }
            }
        });
    }
    var initmember2 = function () {
        api.ajax({
            url: $api.SERVE_URL + 'index.php/index/index/memberList',
            method: 'post',
            headers: {
                "token": token
            },
            data: {
                values: {
                    'group': false,
                    'token_uid': uid
                }
            }
        }, function(ret, err) {
            if (ret) {
                var code = ret.code;
                if (code === 200) {
                    chaosongdata = ret.data.list;
                }
            }
        });
    }
    var initgroupList = function () {
      api.ajax({
          url: $api.SERVE_URL + 'index.php/index/index/groupList',
          method: 'post',
          headers: {
              "token": token
          },
          data: {
              values: {
                  'group': true,
                  'token_uid': uid
              }
          }
      }, function(ret, err) {
          if (ret) {
              var code = ret.code;
              if (code === 200) {
                  groupdata = ret.data.list;
              }
          }
      });
    }
    // 详情数据
    var init = function(id) {
        api.ajax({
            url: $api.SERVE_URL + 'index.php/index/Quality/qualityDetail',
            method: 'post',
            headers: {
                "token": token
            },
            data: {
                values: {
                    "id": id,
                    "token_uid": uid
                }
            }
        }, function(ret, err) {
          // console.log(133);
          // console.log(JSON.stringify(ret.data));
            if (ret) {
                var code = ret.code;
                if (code === 200) {
                  var data = ret.data;
                  $api.val($api.dom('.proj'), data.project_name);
                  $api.val($api.dom('.build'), data.build);
                  $api.val($api.dom('.floor'), data.floor);
                  $api.val($api.dom('.position'), data.position);
                  var shig = '';
                  // console.log(JSON.stringify(shigongdata));
                  for (var i = 0; i < shigongdata.length; i++) {
                    if (data.do_people.indexOf(shigongdata[i].uid + '') !== -1) {
                      shig ? shig += (',' + shigongdata[i].user_name) : (shig += shigongdata[i].user_name)
                    }
                  }
                  $api.val($api.dom('.do_people'), shig);
                  var gs = '';
                  if (data.group) {
                    for (var j = 0; j < groupdata.length; j++) {
                      if (data.modify_group === groupdata[j].id) {
                        gs = groupdata[j].group_name;
                      }
                    }
                  } else {
                    for (var j = 0; j < chaosongdata.length; j++ ) {
                      if (data.modify_group.indexOf(chaosongdata[i].uid + '') !== -1) {
                        gs ? gs += (',' + chaosongdata[i].user_name ) : gs += chaosongdata[i].user_name
                      }
                    }
                  }
                  $api.val( $api.dom('.modify_group'), gs);
                  $api.val($api.dom('.require_time'), data.require_time);
                  $api.val($api.dom('.description'), data.description);
                  // 前图
                  var imgJson = ret.data.image;
                  var tmpltxt = doT.template($api.byId("imagetemp").innerHTML); //生成模板方法
                  $api.byId('imagelist').innerHTML = tmpltxt(imgJson); //数据渲染
                  // 后图
                  var afterImgJson = ret.data.re_image;
                  var tmpltxt = doT.template($api.byId("imagetemp").innerHTML); //生成模板方法
                  $api.byId('afterImgList').innerHTML = tmpltxt(imgJson); //数据渲染

                } else if (code === 401) {
                  api.toast({
                      msg: ret.msg,
                      duration: 2000,
                      location: 'top'
                  });
                } else {
                    // TODO
                }
            }
        });

    }
    var handleback = function(id) {
        api.closeWin({
            name: 'qualitydetail'
        });
    }
</script>

</html>
